<template>
  <div class="user">
    <img :src="user.avatar | dalImg" alt="头像" class="avater" />
    <span>{{ user.nickName ? user.nickName : "匿名" }}</span>
    <span>积分：{{ user.score }}</span>
    <van-button type="primary" center block @click="checkIn">签到</van-button>
    <van-cell
      clickable
      title="修改个人信息"
      is-link
      :to="{ name: 'UserInfo' }"
    />
    <van-cell clickable title="修改密码" is-link :to="{ name: 'UserPwd' }" />
    <van-button type="danger" center block class="logout" @click="logOutHandle"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { removeToken } from "../utils/tools";
import { loadUserInfoAPI, checkInApi } from "../services/users";
export default {
  name: "User",
  data() {
    return {
      user: {},
    };
  },
  async created() {
    this.loadUserData();
  },
  methods: {
    logOutHandle() {
      removeToken();
      this.$router.replace({
        name: "Home",
      });
    },
    async checkIn() {
      await checkInApi();
      this.loadUserData();
    },
    async loadUserData() {
      //获取用户信息
      const res = await loadUserInfoAPI();
      // console.log(res);
      this.user = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  img {
    position: fixed;
    top: 30px;
  }
}
.avater {
  width: 25vw;
  height: 25vw;
  border-radius: 50%;
}
span {
  margin-top: 16px;
}
.logout {
  position: fixed;
  bottom: 80px;
  width: 40vw;
}
</style>
